<template>
  <div class="herd">
      <div class="hd">
      <span>&lt;</span>
      <p>我的</p>
    </div>
    <van-tabs v-model="active" class="zhong">
    <van-tab color='red' title="已中奖">
        <div class="ft">
            <img src="qiaoxiaodong/wode.png" alt="">
            <p>你还没有参加任何活动哦~~</p>
            <h4><span>立即参加活动</span></h4>
        </div>
    </van-tab>
    <van-tab title-active-color='' title="全部">
        <div class="ft">
            <img src="qiaoxiaodong/wode.png" alt="">
            <p>你还没有参加任何活动哦~~</p>
            <h4><span>立即参加活动</span></h4>
        </div>
    </van-tab>
    
</van-tabs>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
    data() {
    return {
      active: 2,
    };
  },
}
</script>

<style scoped>
    .hd {
  width: 100%;
  height: 1.3rem;
  background: red;
  display: flex;
  justify-content: end;
  align-items: center;
  /* background: #fff; */
  position: fixed;
  top: 0;
  z-index: 9999;
}
.hd span {
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0.5rem;
}
.hd p {
  font-size: 0.5rem;
  margin-left: 2.8rem;
}
.zhong {
    /* background: blue; */
    margin-top: 1.3rem;
}
.ft {
    width: 100%;
    height: 4.4rem;
    /* background: blue; */
    margin-top: 3rem;
}
.ft img {
    width: 2.4rem;
    height: 2.4rem;
    margin-left: 35%;
}
.ft p {
    font-size: 0.3rem;
    text-align: center;
    margin-top: 0.4rem;
    color: #999999;
}
.ft h4 {
    margin-left: 28%;
    width: 3.5rem;
    height: 1rem;
    background: red;
    border-radius: 50px;
    margin-top: 0.4rem;
}
.ft h4 span {
    display: inline-block;
    margin-left: 0.7rem;
    margin-top: 0.3rem;
    font-size: 0.3rem;

}
</style>